<template>
    <div class="container">
        <div class="carousel" v-if="false">
            <el-carousel direction="vertical" :autoplay="false" :height="height" >
                <el-carousel-item v-for="item in images" :key="item" indicator-position="none">
                   <!-- <img :src="item" style="hieght: 100%"> -->
                   <div class="image_ad" :style="{ backgroundImage :'url('+item+')' }"></div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="bg"></div>
        <div class="login-warp">
            <div class="avatar"><img alt="Vue logo" src="https://haoxh123.com/img/ymxh/logo.png"></div>
            <div class="title">無优商城后台系统</div>
            <div class='cutover'><i @click="cutover()" :class="type_mode ? 'fa2x fas fa-qrcode' : 'fa2x el-icon-user-solid'" ></i></div>
            <div class="login" v-if="type_mode">
                <div class="flied-title">账号</div>
                <el-input v-model="ruleForm.username" placeholder="请输入账号\邮箱\手机号" class="q-input"></el-input>
                <div class="flied-title">密码</div>
                <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" class="q-input"></el-input>
                <el-button type="primary" class="login-submit" size="small" @click="login" >立即登录</el-button>
            </div>
            <div class="login" v-if="!type_mode">
                <div class='code'>
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563888123534&di=f42df5ad9447a241e6bed1c22203eac7&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F48%2F34%2F7657442144c5df2.jpg">
                </div>
            </div>
            <div class='share'>
                <ul class='share-list'>
                    <li>
                        <a href=""><i class="el-icon-s-goods"></i></a>
                    </li>
                    <li>
                        <a href=""><i class="el-icon-platform-eleme"></i></a>
                    </li>
                    <li>
                        <a href=""><i class="el-icon-success"></i></a>
                    </li>
                    <li>
                        <a href=""><i class="el-icon-error"></i></a>
                    </li>
                </ul>
            </div>
            <div class="copyright">
                copyright 2019 by<el-link href="http://haoxh123.com" target="_blank">好享汇科技提供技术支持</el-link>
                
                <p><a href="http://haoxh123.com">haoxh123.com 400-622-5559</a></p>
            </div>
        </div>
    </div>
</template>

<script>
let _this;
import axios from "axios";
import store from '../../store/store';
import { mapMutations} from 'vuex'
import { constants } from 'crypto';
import { access } from 'fs';
    export default {
        name: 'login',
        data() {
            return {
                height:null,
                identifyCodes: "1234567890",
                identifyCode: "",
                errorInfo : false,
                type_mode: true,
                ruleForm: {
                    username: '',
                    password: '',
                    validate: ''
                },
                images:['https://xiaocx.haoxh123.com/web/resource/images/bg-login.png'],
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    validate: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }
                    
                
            }
        },
        beforeMount:function(){
            this.height = document.documentElement.clientHeight - 27  + 'px';
        },
        mounted() {
            _this = this;    
        },
        computed: {
            ...mapMutations(['setAccessToken']),
        },
        methods: {
            cutover(){
                this.type_mode = !this.type_mode;
            },
            login(){
                axios.post('/api/v1/login',{
                    username:_this.ruleForm.username,
                    password:_this.ruleForm.password
                }).then((result) => {
                    let accessToken = result.data.data.access_token
                    sessionStorage.setItem('accessToken',accessToken)
                    this.$router.push({path:'/index'})
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                }).catch((error) => {
                    console.log(error);
                    this.$message.error(error.response.data.message);
                }) 
            }

        }
    }
</script>

<style lang="less">
    .flex{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }
    .fa2x {
        font-size: 2rem;
    }
    .flex-justify{
        -webkit-box-align: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .q-input .el-input__inner {
        border: none !important;
        border-bottom: 1px solid #e3e3e3 !important;
        border-radius: 0 !important;
    }
    .container{
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        .flex;
        .flex-justify;
        .carousel {
            display:break-inline;
            width: calc(100% - 400px);
            background-color: transparent;
        }
        .login-warp {
            width: 400px;
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(255,255,255,.89);
            .avatar,img{
                width: 80px;
            }
            .avatar {
                margin: 100px auto 0 auto;
            }
            .title {
                margin: 20px auto;
                font-size:20px ;
                font-weight: bold;
                text-align: center;
            }
            .login {
                text-align: left;
                .flied-title {
                    font-size: 18px;
                    font-weight: bold;
                    margin: 0 0 0 15px;
                    color: #666;
                    line-height: 44px;
                }
                .code {
                    height: 190px;
                    width: 190px;
                    margin: 30px auto;
                    img {
                        height: 100%;
                        width: 100%
                    }
                }
                .login-submit {
                    margin: 15px ;
                }
            }
            .share {
                width: 100%;
                margin-top: 20px;
                .share-list {
                    width: 100%;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    margin-left: 15px;
                    li {
                        line-height: 30px;
                        float: left;
                        width: 13%;
                        text-align: center;
                        a {
                            color: #606266;
                            transition: .3s;
                            padding: .5rem;
                            border-radius: 50%;
                            border: 1px solid #606266;
                        }
                        a:hover {
                            color: #5cb6ff;
                            }
                        }
                    }
                .share-list:after,.share-list:before {
                    content: ' ';
                    display: block;
                    clear: both;
                }
                    
                }
                .cutover {
                    padding-top: 100px;
                    padding-right: 15px;
                    text-align: right;
                }
            .copyright {
                font-size: 12px;
                color: #999;
                position: fixed;
                bottom: 40px;
                width: 400px;
                text-align: center;
            }
        }
    }
    .bg {
        // background: url('https://haoxh123.com/img/ymxh/banner.jpg') no-repeat fixed;
        background: url('https://xiaocx.haoxh123.com/web/resource/images/bg-login.png') no-repeat fixed;
        background-size: cover;
        height: 100%;
        width: 100%;
    }
    .image_ad {
        height:100%;
        background-size: 100% 110%;
    }
</style>